<!-- Login -->
<template>
  <div id="Login">
    <el-card class="box-card" shadow="hover">
      <h1>登录</h1>
      <el-form ref="LoginForm" :rules="LoginFormRules" :model="LoginForm" label-width="60px" size="small">
        <el-form-item label="账号: " prop="userName">
          <el-input v-model="LoginForm.userName" placeholder="请输入账号..." clearable />
        </el-form-item>
        <el-form-item label="密码: " prop="passWord">
          <el-input v-model="LoginForm.passWord" placeholder="请输入密码..." password show-password />
        </el-form-item>
      </el-form>
      <div class="login_bottom_btn_box">
        <el-button size="small" type="primary" @click="Login_Submit">登录</el-button>
        <el-button size="small" @click="Login_Reset">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  POST_Login_Api // 登录接口
} from '@Api/Permission'
import { mapState } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      // 登录表单
      LoginForm: {
        userName: '', // 账号
        passWord: '' // 密码
      },
      // 表单验证规则
      LoginFormRules: {
        userName: [
          { required: true, message: '请输入账号', trigger: ['change', 'blur'] }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  // this.$Validator.isPhone
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {
    ...mapState('Common', [
      'MessageDuration',
      'CommonMessageCenter'
    ])
  },

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    /**
     * @date: 2024-10-12 23:35:57
     * @description:登录表单提交
     * @author: Forever丿顾北
    **/
    Login_Submit() {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          // 登录表单验证通过
          // 登录接口
          this.POST_Login_Fun(this.LoginForm.userName, this.LoginForm.passWord)
        } else {
          // 登录表单验证失败
          return false
        }
      })
    },
    /**
     * @date: 2024-10-12 23:36:39
     * @description: 登录表单重置
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    Login_Reset() {
      this.$refs.LoginForm.resetFields()
    },
    /**
    * @date: 2024-10-12 23:53:01
    * @description:登录授权
    * @author: Forever丿顾北
    * @param { String| passWord } 密码
    * @param { String | useName } 账号
    * @returns{ Object| data } token 用户信息  菜单
    **/
    POST_Login_Fun(useName, passWord) {
      POST_Login_Api({
        useName: useName, // 搜索
        passWord: passWord
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '登录成功',
            type: 'success',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.onCloseSuccessFun(res.data)
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter,
            onClose: this.onCloseErrorFun()
          })
        }
      })
    },
    /**
     * @date: 2024-10-14 01:03:00
     * @description: $message success 关闭回调
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    onCloseSuccessFun(res) {
      sessionStorage.setItem('Token', res.token)
      sessionStorage.setItem('menu', JSON.stringify(res.menu))
      sessionStorage.setItem('userInfo', JSON.stringify(res.userInfo))
      this.$router.push({ path: '/welcome' })
    },
    /**
     * @date: 2024-10-14 01:14:23
     * @description: $message error 关闭回调
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    onCloseErrorFun() {
      sessionStorage.removeItem('Token')
      sessionStorage.removeItem('menu')
      sessionStorage.removeItem('userInfo')
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
